<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Guess Card</title>
    <link
      rel="shortcut icon"
      href="{{ url_for('static', filename='favicon.ico') }}"
    />
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/js/jquery.cookie.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/MessageBox.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ::-webkit-scrollbar {
        display: none;
      }
      .modal {
        z-index: 99999999;
        padding-right: 0px;
        position: absolute;
        top: 30%;
        margin-top: -7.5r em;
        background: #fff;
        width: 30rem;
        height: 12rem;
        font-size: 1.6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        left: 50%;
        margin-left: -15rem;
        padding: 0.5rem;
        border-radius: 0.5rem;
      }
      .modal button {
        margin-right: 0.5rem;
        height: 2rem;
        line-height: 2rem;
        font-size: 1.6rem;
      }
      .modal-dialog {
        width: 100%;
      }
      .modal-footer {
        text-align: center;
      }
      .modal-header {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
        height: 3.2rem;
      }
      body {
      }
      .wrap {
        position: relative;
        height: 100vh;
        width: 100%;
        background-image: url(../static/game_box_main_bg.png);
        background-size: cover;
        overflow-y: scroll;
      }
      .content {
        height: 170px;
      }
      .rank-box {
        width: calc(100% - 2rem);
        height: 725px;
        margin: 1rem;
        border-radius: 1rem;
        border: 2px solid yellow;
      }
      .play-rank-text-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 14px;
        height: 57px;
      }
      .play-rank-text {
        font-weight: 600;
        font-size: 32px;
        color: #ffe0ab;
        line-height: 45px;
        margin: 0 8px;
      }
      .play-rank-text-left {
        text-align: right;
      }
      .play-rank-text-right {
        text-align: left;
      }
      .play-rank-text-1 {
        width: 45px;
        height: 6px;
        background: #ffed75;
        border-radius: 3px;
        margin-bottom: 8px;
      }
      .play-rank-text-2 {
        width: 21px;
        height: 6px;
        background: #ffed75;
        border-radius: 3px;
      }
      .img-part {
        width: 194px;
        height: 194px;
        padding: 0;
      }
      img[src=""],
      img:not([src]) {
        opacity: 0;
      }

      .font-20 {
        font-size: 20px;
      }
      .font-18 {
        font-size: 18px;
      }
      .font-16-bold {
        font-size: 16px;
        font-weight: bolder;
      }
      .header-left {
        height: 54px;
        background: linear-gradient(
          270deg,
          rgba(127, 53, 53, 0) 0%,
          rgba(125, 52, 52, 0.6) 100%,
          rgba(118, 49, 49, 0) 28%,
          rgba(109, 44, 44, 0) 59%,
          rgba(100, 43, 43, 0.6) 62%,
          rgba(99, 39, 39, 0.6) 91%,
          rgba(72, 24, 24, 0) 100%
        );
        margin-bottom: 11px;
        line-height: 54px;
        display: inline-block;
        padding-left: 50px;
      }
      .header-left img {
        width: 32px;
        height: 32px;
        margin-right: 12px;
        margin-bottom: 8px;
      }
      .header-left span {
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
      }
      .header-right {
        height: 54px;
        background: linear-gradient(
          270deg,
          rgba(125, 52, 52, 0.6) 0%,
          rgba(127, 53, 53, 0) 100%,
          rgba(118, 49, 49, 0) 28%,
          rgba(109, 44, 44, 0) 59%,
          rgba(100, 43, 43, 0.6) 62%,
          rgba(99, 39, 39, 0.6) 91%,
          rgba(72, 24, 24, 0) 100%
        );
        margin-bottom: 11px;
        line-height: 54px;
        display: flex;
        width: 420px;
        align-items: center;
        justify-content: flex-end;
        padding-right: 50px;
        font-weight: 500;
        font-size: 24px;
        color: #ffffff;
      }
      .header-right img {
        width: 32px;
        height: 32px;
        margin: 0 25px;
      }
      .rank-th-row {
        background: linear-gradient(
          rgba(255, 220, 76, 0.57) 0%,
          rgba(255, 128, 18, 0.06) 100%
        );
        height: 60px;
        color: #fff;
        font-size: 1.4rem;
        padding-left: 12px;
      }
      .rank-table-tr {
        height: 35px;
        font-size: 16px;
        color: #ffffff;
      }
      .rank-table-tr td div {
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 20px 0;
        font-size: 1.2rem;
      }
      .rank-table-tr-td1 {
        padding-left: 12px;
      }
      .rank-table-tr td .rank {
        width: 44px;
        height: 34px;
        text-align: center;
      }
      .rank-table-tr td .rank1 {
        width: 76px;
        height: 35px;
        background-image: url(../static/rank1.png);
        background-size: cover;
      }
      .rank-table-tr td .rank2 {
        width: 76px;
        height: 35px;
        background-image: url(../static/rank2.png);
        background-size: cover;
      }
      .rank-table-tr td .rank3 {
        width: 76px;
        height: 35px;
        background-image: url(../static/rank3.png);
        background-size: cover;
      }
      .main-logo {
        position: absolute;
        width: 322px;
        height: 170px;
        background-image: url(../static/main-logo.png);
        background-size: cover;
        left: 50%;
        top: 56px;
        margin-left: -161px;
      }
      .back {
        position: absolute;
        background: rgba(255, 255, 255, 0.6);
        width: 2rem;
        height: 2rem;
        left: 2rem;
        border-radius: 1rem;
        text-align: center;
        top: 72px;
        line-height: 2rem;
        color: #fff;
        font-size: 1.6rem;
        cursor: pointer;
      }
    </style>
    <title>页脚超链接</title>
  </head>
  <script>
    !(function (n) {
      var e = n.document,
        t = e.documentElement,
        i = 750,
        d = i / 100,
        o = "orientationchange" in n ? "orientationchange" : "resize",
        a = function () {
          var n = t.clientWidth || 375;
          n > 750 && (n = 750);
          t.style.fontSize = n / d / 4 + "px";
        };
      e.addEventListener &&
        (n.addEventListener(o, a, !1),
        e.addEventListener("DOMContentLoaded", a, !1));
    })(window);
    $(document).ready(function () {
      // 阻止打开调试窗
      document.onkeydown = function (e) {
        if (e.key === "F12") {
          e.cancelBubble = true;
          e.returnValue = false;
          MessageBox.alert("F12已经禁用了哦");
        }
      };
      // 刷新排名
      function refreshRank(rankList) {
        $("#rankInfo").html("");
        let head =
          '<tr role="row" class="rank-th-row" style="width:100%;margin: 0;padding: 0">\n' +
          '                                <th class="col-xs-3" style="text-align: left;padding: 0; padding-left: 12px;">排名</th>\n' +
          '                                <th class="col-xs-3" style="text-align: left;padding: 0">玩家</th>\n' +
          '                                <th class="col-xs-3" style="text-align: left;padding: 0">积分</th>\n' +
          '                                <th class="col-xs-3" style="text-align: left;padding: 0">段位</th>\n' +
          // '                                <th class="col-xs-3" style="text-align: left;padding: 0">' +
          // '                                    <span style="text-decoration:underline;color: #0a6cd6;cursor: pointer"\n' +
          // '                                          title="积分规则：\n无提示答对积4分,每使用一次提示扣1分，提示用完跳过扣1分">' +
          // "                                        积分</span></th>\n" +
          // '                                <th class="col-xs-3" style="text-align: left;padding: 0;">\n' +
          // '                                    <span style="text-decoration:underline;color: #0a6cd6;cursor: pointer"\n' +
          // '                                          title=\"\<50:黑铁\n50-100:青铜\n100-300:白银\n300-800:黄金\n800-1500:钻石\n\>=1500:大师\n\">' +
          // "                                        段位</span></th>\n" +
          "                            </tr>";
        $("#rankInfo").append(head);
        for (let i = 0; i < rankList.length; i++) {
          let rankContent = "";
          const rankInfo = rankList[i];
          if (rankInfo != null) {
            let tier = "";
            if (rankInfo[1] < 20) {
              tier = "<span >黑铁</span>";
            } else if (rankInfo[1] < 100) {
              tier = "<span >青铜</span>";
            } else if (rankInfo[1] < 300) {
              tier = "<span >白银</span>";
            } else if (rankInfo[1] < 800) {
              tier = "<span >黄金</span>";
            } else if (rankInfo[1] < 1500) {
              tier = "<span >钻石</span>";
            } else {
              tier = "<span >大师</span>";
            }
            rankContent += "<tr class='rank-table-tr'>";
            if (i === 0) {
              rankContent +=
                "<td class='rank-table-tr-td1'><div class='rank1'></div></td>";
            } else if (i === 1) {
              rankContent +=
                "<td class='rank-table-tr-td1'><div class='rank2'></div></td>";
            } else if (i === 2) {
              rankContent +=
                "<td class='rank-table-tr-td1'><div class='rank3'></div></td>";
            } else {
              rankContent +=
                "<td class='rank-table-tr-td1'><div class='rank'>" +
                (i + 1) +
                "</div></td>";
            }
            rankContent += "<td><div>" + rankInfo[0] + "</div></td>";
            rankContent += "<td><div>" + rankInfo[1] + "</div></td>";
            rankContent += "<td><div>" + tier + "</div></td>";
            rankContent += "</tr>";
            $("#rankInfo").append(rankContent);
          }
        }
      }
      $.ajax({
        type: "post",
        url: "/game/update/score",
        data: {
          inc: 0,
          user: $.cookie("userName")?.trim(),
        },
        dataType: "json",
        async: false,
        success: function (data, status) {
          if (data != null && data.list.length > 0) {
            $("#score").text(data.score);
            refreshRank(data.list);
          }
        },
        error: function () {
          MessageBox.alert("调用异常，操作失败!");
        },
      });
      // 禁止右键
      document.oncontextmenu = function () {
        return false;
      };
    });
    function goback() {
      window.history.go(-1);
    }
  </script>
  <body>
    <div class="wrap">
      <div class="content">
        <div class="main-logo"></div>
        <div class="back" onclick="goback()"><</div>
      </div>
      <div class="row game_box rank-box">
        <div class="play-rank-text-box">
          <div class="play-rank-text-left">
            <div class="play-rank-text-1"></div>
            <div class="play-rank-text-2" style="margin-left: 24px"></div>
          </div>
          <div class="play-rank-text">玩家排名</div>
          <div class="play-rank-text-right">
            <div class="play-rank-text-1"></div>
            <div class="play-rank-text-2"></div>
          </div>
        </div>
        <div
          class="col-xs-12"
          style="
            width: 100%;
            height: 85%;
            border: solid 1px #6b686887;
            padding: 0;
          "
        >
          <div
            style="
              width: 100%;
              height: 90%;
              margin: 5px;
              font-size: 13px;
              border: none;
              background: none;
              overflow: auto;
            "
          >
            <table id="rankInfo" style="width: 100%"></table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
